import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Typography, Alert } from 'antd';
import styles from './Welcome.less';

const CodePreview = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);

export default () => (
  <PageHeaderWrapper>
    <Card>
      <Typography.Text strong>
          <p>欢迎使用 Swagger-SQL。</p>
          <p>Swaggler-SQL 是一个 API as Service 系统。</p>
          <p>通过定义 Swagger API，以及 API 相关的 SQL 语句，Swagger-SQL 立刻为您提供产品级服务。</p>
      </Typography.Text>
    </Card>
    <Card>
      <Typography.Text>
          <p>Swagger-SQL 特点:</p>
          <p>1. 支持数据库(有 JDBC 驱动即可)</p>
          <p>2. 支持数据库事务</p>
          <p>3. 支持缓存(以及 evict)</p>
          <p>4. 基于 Swagger Editor 的 API 编辑界面</p>
          <p>5. 修改 API 后，立即生效</p>
          <p>6. 支持安全检查和 SSO 集成</p>
          <p>7. 支持 JSON, XML 和 YAML 格式</p>
      </Typography.Text>
    </Card>
  </PageHeaderWrapper>
);
